<template>
  <div class="active">
    <div style="padding: 0 20px">
      <div class="propelling">推送控制</div>
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect2"
      >
        <el-menu-item index="1">商品</el-menu-item>
        <el-menu-item index="2" disabled>抽奖</el-menu-item>
        <el-menu-item index="3" disabled>优惠卷</el-menu-item>
        <el-menu-item index="4" disabled>公告</el-menu-item>
        <el-menu-item index="5" disabled>助力榜</el-menu-item>
      </el-menu>

      <div v-show="activeIndex2 == 1">
        <div class="serach-shop">
          <!-- <MainSearch placeholder="查找商品名称" /> -->
          <div></div>
          <div>
            <!-- <el-button type="primary">商品排序</el-button> -->
            <el-button
              :disabled="
                live_status == 103 ||
                live_status == 104 ||
                live_status == 106 ||
                live_status == 107
              "
              type="primary"
              @click="addShopShow"
              >导入商品</el-button
            >
          </div>
        </div>
        <Exhibition :roomid="roomid"></Exhibition>
      </div>
    </div>

    <HyTable
      ref="HyTable"
      @myAddShop="myAddShop"
      @handleCurrentChange="handleCurrentChange"
      @inputSearch="inputSearch"
      :tableItems="tableItems"
      :tableData="tableData"
      :totalPage="totalPage"
    ></HyTable>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, ref } from 'vue'
// import MainSearch from '@/components/main-header/src/main-search.vue'
import { GetRoomProductList, AddGoods } from '@/service/main/main'
import { HyTable } from '@/base-ui/table/index'

import tableItems from '../config/tableItems-config'
import Exhibition from './Exhibition.vue'

export default defineComponent({
  components: { HyTable, Exhibition },
  props: {
    roomid: {
      type: String,
    },
    live_status: {
      type: String,
    },
  },
  async setup(props) {
    const HyTable = ref()
    const reload: any = inject('reload')
    // 获取直播间id
    // eslint-disable-next-line vue/no-setup-props-destructure
    let roomid = props.roomid
    onMounted(() => {
      return HyTable
    })
    const status = (param: any) => (param == 0 ? '已下架' : '已上架')
    //  索引

    const activeIndex2 = ref('1')
    // 显示table组件
    const addShopShow = () => {
      HyTable.value.changeVisibility(true)
    }
    const handleSelect = (key: any, keyPath: any) => {
      console.log(key, keyPath)
    }
    const handleSelect2 = (key: any, keyPath: any) => {
      console.log(key, keyPath)
    }

    // 默认页码
    const currentPage = ref(1)
    // 获取商品列表
    let tableData = ref()
    // 每页页数
    const pages = 10
    // 导入的商品列表
    const RoomProductList = await GetRoomProductList(
      currentPage.value - 1,
      pages,
      roomid,
      '',
    )
    tableData.value = RoomProductList.Data
    // 向上取整页码数
    let totalPage = Math.ceil(RoomProductList.Total / pages) * 100
    console.log(totalPage)

    const handleCurrentChange = async (val: any) => {
      console.log(val)
      currentPage.value = val
      let RoomProductList = await GetRoomProductList(
        currentPage.value - 1,
        pages,
        2,
        '',
      )
      tableData.value = RoomProductList.Data
    }

    // 确认添加
    async function myAddShop(GoodsIds: number[]) {
      const addRes = await AddGoods(GoodsIds, roomid)
      if (addRes.errcode == 0) {
        HyTable.value.changeVisibility(false)
      }
      reload()
      // location.reload()
    }

    return {
      activeIndex2,
      tableData,
      tableItems,
      HyTable,
      totalPage,
      // eslint-disable-next-line vue/no-dupe-keys
      roomid,
      status,
      handleSelect,
      handleSelect2,
      myAddShop,
      addShopShow,
      handleCurrentChange,
    }
  },
})
</script>

<style scoped lang="less">
.active {
  .propelling {
    font-size: 0.25rem;
    font-weight: bold;
  }
  .serach-shop {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
  }
}
</style>
